<template>
  
  <el-menu
    router
    :default-active="$store.state.menu_active"
    class="el-menu-vertical-demo"
    :collapse="isCollapse"
    @open="handleOpen"
    @close="handleClose"
    :background-color="menuconfig.bgc"
    :text-color="menuconfig.txtc"
    :active-text-color="menuconfig.attxtc"
    style="border-right: unset;"
  >
    <menu-list :menuList="menuList"></menu-list>

  </el-menu>
</template>

<script>
import MenuList from './MenuList.vue'
export default {
  name: 'Menu',
  props: {
    menuList: {
      type: Array,
      default: function () {
        return []
      }
    },
    menuconfig: {
      type: Object,
      default: function () {
        return {
          bgc: '#101834',
          txtc: '#fff',
          attxtc: '#4999FA'
        }
      }
    },
    isCollapse: {
      type: Boolean,
      default: function () {
        return true
      }
    }
  },
  components: {
    MenuList
  },
  data () {
    return {
      // isCollapse: true
    }
  },
  mounted () {
  },
  methods: {
    handleOpen: function (key, keypath) {
      // console.log(key)
      // console.log(keypath)
    },
    handleClose: function(key, keypath) {
      // console.log(key)
      // console.log(keypath)
    }
  }
}
</script>

<style scoped>
.el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 200px;
  min-height: 400px;
  border-right: 1px solid #101834;
}
.el-sub-menu__title {
  border-right: 1px solid #101834;
}
.el-container {
  padding: 0;
  margin: 0;
}
.el-main {
  padding: 0;
  margin: 0;
}
.el-main::-webkit-scrollbar {
  display: none;
  width: 0;
}
</style>
